import CardView from "@/components/CardView";
import FilterMenuSearch from "@/components/FilterMenuSearch";
import InfoCellGray from "@/components/InfoCellGray";
import PageTitle from "@/components/PageTitle";
import RoundEdgeButtonGroup from "@/components/RoundEdgeButtonGroup";
import RowView from "@/components/RowView";
import TextView from "@/components/TextView";
import { defineComponent, reactive, ref, render } from "vue";
import style from "./index.module.less";
import { useRequest } from "./request";
import { Divider } from "vant";
import { getUserInfoUrl, phoneClick } from "@/command/apiTool";
import ListView from "@/components/ListView";
import ButtonGroup from "@/components/ButtonGroup";
import ButtonView from "@/components/ButtonView";
import { IFilterMenuChoose } from "@/components/FilterMenu/types";

export default defineComponent({
  setup() {
    const form = ref({ userName: "", code: "" });
    const { useHistoryList } = useRequest();
    const render1 = () => {
      return (
        <div class={[style["banner-bg"]]}>
          <div class={"ml-29 mt-15"}>
            <div class={[style["text-num1"]]}>
              {useHistoryList.value || "0"}
            </div>
            <div class={[style["text-num2"]]}>累计用工次数</div>
          </div>
        </div>
      );
    };
    const renderItem = (e: any) => {
      const data = {
        title: e.userName,
        text: "用工时间：" + e.workDay,
        src: e.logoUrl,
      };
      const buttons = [
        {
          text: "",
          onClick: () => phoneClick(e.phone),
        },
      ];
      return (
        <div class={"w-full"}>
          <InfoCellGray
            {...data}
            right={() => <span class="text-[#c7c2c1]">{e.workDate}</span>}
          >
            <TextView>{e.area + " " + e.town}</TextView>
            <ButtonView onClick={() => phoneClick(e.phone)}>联系TA</ButtonView>
          </InfoCellGray>
        </div>
      );
    };
    const render2 = () => {
      const data: IFilterMenuChoose[] = [
        {
          type: "area",
          key: "code",
        },

        {
          type: "datePicker",
          key: "date",
          title: "日期",
        },
      ];
      return (
        <div class={"!h-[100vh]"}>
          <CardView class={" z-10 mt-12 "} title="历史记录">
            <FilterMenuSearch
              v-model={form.value}
              choose={data}
              searchKey="userName"
            />
            {/* 类型  ，日期 */}
            <ListView
              // type="custom"
              {...getUserInfoUrl(
                {
                  dh: "/api/H5/service/helpWork/heavy/useHistoryList",
                  xh: "",
                },
                form.value
              )}
              renderItem={renderItem}
              itemHeight={105}
              themeStyle="list-bottom-border"
            />
          </CardView>
        </div>
      );
    };
    return () => {
      return (
        <PageTitle title="用工记录">
          {render1()}
          {render2()}
        </PageTitle>
      );
    };
  },
});
